<template>
    <div>
        <header class="header-content">
            <div class="header-icon-back" @click="to('pay')"><span></span></div>
            <div class="header-title">地址管理</div>
        </header>
        <div class="view-content">
            <div class="address-box">
                <div class="address-box-title"><span>陈大鹏</span><span>189****3850</span><img src="../assets/icon/icon-edit.png" @click="to('addressEdit')"></div>
                <div class="address-txt">宿迁市洋河新区电商产业园2楼宿迁市洋河新区电商产业园2楼宿迁市洋河新区电商产业园2楼</div>
                <div class="default-add"><span>默认地址</span></div>
            </div>
        </div>
       <div class="addAddressBar widthFull">
            <div class="addAddress" @click="to('addressEdit')">添加收货地址</div>
        </div>
    </div>
</template>
<style scoped>
    @import "../css/style.css";
    .address-box {
        background-color: #fff;
        border-bottom: 0.0625rem solid #f5f5f5;
        padding: 0.9375rem;
    }
    .address-box-title {
        margin-bottom: 0.5rem;
        font-size: 1.0625rem;
        text-align: left;
    }
    .address-box-title img {
        width: 1.5rem;
        height: 1.5rem;
        position: absolute;
        right: 0.9375rem;
        top: 0.9375rem;
    }
    .address-txt {
        font-size: 0.8125rem;
        line-height: 1.125rem;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
    }
    .default-add {
        text-align: left;
    }
    .default-add span {
        color: #fff;
        padding: 0 0.3125rem;
        font-size: 0.8125rem;
        margin-top: 0.3125rem;
        display: inline-block;
        background: #e21323;
    }
    .addAddressBar {
        background: #fff;
        padding: 0.75rem 0.625rem;
        border-top: 0.0625rem solid #e1e1e1;
        border-bottom: 0.0625rem solid #e1e1e1;
        bottom: 0;
    }
    .addAddress {
        font-size: 1.125rem;
        color: #fff;
        line-height: 2.55rem;
        border-radius: 0.3125rem;
        background-color: #1aad19;
    }
</style>
<script>
    export default {
        methods: {
            to(page) {
                this.$router.push({
                    name: page
                })
            }
        }
    }
</script>
